<template>
  <div class="hot_wrap">
    <div class="hot_left">
      <img v-if="songList.length > 0" :src="songList[0].pic" alt="" />
    </div>
    <div class="hot_right">
      <h4>热门50首</h4>
      <song-list :song-list="songList" :isAlbum="true"></song-list>
    </div>
  </div>
</template>
<script>
import { _getArtistHot50 } from '../../../network/aritist'
import { formatDate } from '../../../utils/tool'
import songList from '../../../components/Songlist/song-list.vue'
export default {
  props: ['id'],
  components: { songList },
  data () {
    return {
      // artist:null,
      songList: []
    }
  },
  created () {
    // this.artist=this.$route.query.artist;
    this.getHot50()
  },
  methods: {
    // 获取热门50首
    async getHot50 () {
      this.songList = []
      console.log(this.id)
      var res = await _getArtistHot50(this.id)
      console.log(res)
      let songList = res.data.songs
      for (let i in songList) {
        this.songList.push({
          id: songList[i].id,
          name: songList[i].name,
          album: songList[i].al.name,
          arist: songList[i].ar[0].name,
          pic: songList[i].al.picUrl,
          time: formatDate(new Date(songList[i].dt), 'mm:ss')
        })
      }
      console.log(this.songList)
    }
  }
}
</script>
<style lang="less" scoped>
.hot_wrap {
  width: 95%;
  margin: 10px auto;
  height: 400px;
  overflow-y: auto;
  display: flex;
  .hot_left {
    width: 120px;
    img {
      width: 100%;
      height: 120px;
    }
  }
  .hot_right {
    flex: 1;
  }
}
</style>
